<template>
  <s-layout title="加入文明实践" navbar="normal" :bgStyles="{ color: '#f5f5f5' }">
    <!-- Header Section -->
    <view class="header-section">
      <view class="header-icon">👥</view>
      <view class="header-title">加入文明实践大家庭</view>
      <view class="header-subtitle">
        成为文明实践志愿者，用行动传递爱心，用服务点亮社区
        <br />让我们一起为建设文明和谐社会贡献力量
      </view>
    </view>

    <!-- Type Selection -->
    <view class="type-selection">
      <view class="section-title">
        <text class="title-icon">📋</text>
        <text class="title-text">选择申请类型</text>
      </view>
      <view class="type-cards">
        <view
          :class="['type-card', { active: state.selectedType === 'volunteer' }]"
          @tap="state.selectedType = 'volunteer'"
        >
          <view class="type-icon">🙋</view>
          <view class="type-name">志愿者申请</view>
          <view class="type-desc">成为普通志愿者，参与各类文明实践活动</view>
        </view>
        <view
          :class="['type-card', { active: state.selectedType === 'instructor' }]"
          @tap="state.selectedType = 'instructor'"
        >
          <view class="type-icon">👩‍🏫</view>
          <view class="type-name">讲师申请</view>
          <view class="type-desc">加入师资库，提供专业知识和技能培训</view>
        </view>
      </view>
    </view>

    <!-- Application Form -->
    <view class="form-section">
      <view class="section-title">
        <text class="title-icon">📝</text>
        <text class="title-text">基本信息</text>
      </view>

      <view class="form-group">
        <text class="form-label">姓名 *</text>
        <input v-model="state.form.name" class="form-input" placeholder="请输入您的真实姓名" />
      </view>

      <view class="form-row">
        <view class="form-group">
          <text class="form-label">性别 *</text>
          <picker mode="selector" :range="state.genderOptions" @change="handleGenderChange">
            <view class="form-input picker-input">
              {{ state.form.gender || '请选择' }}
            </view>
          </picker>
        </view>
        <view class="form-group">
          <text class="form-label">年龄 *</text>
          <input
            v-model="state.form.age"
            class="form-input"
            type="number"
            placeholder="年龄"
          />
        </view>
      </view>

      <view class="form-group">
        <text class="form-label">联系电话 *</text>
        <input
          v-model="state.form.phone"
          class="form-input"
          type="number"
          placeholder="请输入手机号码"
        />
      </view>

      <view class="form-group">
        <text class="form-label">身份证号 *</text>
        <input
          v-model="state.form.idCard"
          class="form-input"
          placeholder="请输入身份证号码"
        />
      </view>

      <view class="form-group">
        <text class="form-label">居住地址</text>
        <input v-model="state.form.address" class="form-input" placeholder="请输入详细地址" />
      </view>

      <view class="form-row">
        <view class="form-group">
          <text class="form-label">学历</text>
          <picker mode="selector" :range="state.educationOptions" @change="handleEducationChange">
            <view class="form-input picker-input">
              {{ state.form.education || '请选择' }}
            </view>
          </picker>
        </view>
        <view class="form-group">
          <text class="form-label">职业</text>
          <input v-model="state.form.occupation" class="form-input" placeholder="请输入职业" />
        </view>
      </view>

      <view class="form-group">
        <text class="form-label">特长技能</text>
        <view class="skill-tags">
          <view
            v-for="skill in state.skillOptions"
            :key="skill"
            :class="['skill-tag', { active: state.form.skills.includes(skill) }]"
            @tap="toggleSkill(skill)"
          >
            {{ skill }}
          </view>
        </view>
      </view>

      <view class="form-group">
        <text class="form-label">申请理由</text>
        <textarea
          v-model="state.form.reason"
          class="form-textarea"
          placeholder="请简述您加入文明实践的原因和期望贡献的能力"
        ></textarea>
      </view>

      <view class="form-group">
        <text class="form-label">可参与时间</text>
        <textarea
          v-model="state.form.availableTime"
          class="form-textarea"
          placeholder="请描述您可以参与志愿服务的时间安排"
        ></textarea>
      </view>

      <view class="form-group">
        <text class="form-label">相关证件上传</text>
        <view class="upload-area" @tap="handleUpload">
          <text class="upload-icon">📎</text>
          <text class="upload-text">点击上传身份证、相关资格证书等</text>
          <view v-if="state.uploadedFiles.length > 0" class="file-list">
            <view v-for="(file, index) in state.uploadedFiles" :key="index" class="file-item">
              <text>{{ file }}</text>
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- Notice Section -->
    <view class="notice-section">
      <view class="section-title">
        <text class="title-icon">📢</text>
        <text class="title-text">申请须知</text>
      </view>
      <view class="notice-list">
        <view class="notice-item">申请者需年满16周岁，身体健康，品行端正</view>
        <view class="notice-item">提交的个人信息必须真实有效，如有虚假将取消申请资格</view>
        <view class="notice-item">申请提交后，我们将在3-5个工作日内进行审核</view>
        <view class="notice-item">审核通过后将收到短信通知，请保持手机畅通</view>
        <view class="notice-item">成为志愿者后需参加相关培训和活动</view>
        <view class="notice-item">志愿服务时间将记录在案，可获得相应积分奖励</view>
      </view>
    </view>

    <!-- Submit Button -->
    <view class="submit-section">
      <button class="submit-btn" @tap="handleSubmit">提交申请</button>
    </view>
  </s-layout>
</template>

<script setup>
import { reactive } from 'vue'
import sheep from '@/sheep'

const state = reactive({
  selectedType: 'volunteer',
  genderOptions: ['男', '女'],
  educationOptions: ['小学', '初中', '高中', '大专', '本科', '硕士', '博士'],
  skillOptions: [
    '文艺表演',
    '心理咨询',
    '医疗护理',
    '法律咨询',
    '教育培训',
    '环保宣传',
    '科技服务',
    '手工制作',
    '摄影摄像',
    '其他'
  ],
  uploadedFiles: [],
  form: {
    name: '',
    gender: '',
    age: '',
    phone: '',
    idCard: '',
    address: '',
    education: '',
    occupation: '',
    skills: [],
    reason: '',
    availableTime: ''
  }
})

const handleGenderChange = (e) => {
  state.form.gender = state.genderOptions[e.detail.value]
}

const handleEducationChange = (e) => {
  state.form.education = state.educationOptions[e.detail.value]
}

const toggleSkill = (skill) => {
  const index = state.form.skills.indexOf(skill)
  if (index > -1) {
    state.form.skills.splice(index, 1)
  } else {
    state.form.skills.push(skill)
  }
}

const handleUpload = () => {
  uni.chooseImage({
    count: 5,
    success: (res) => {
      state.uploadedFiles = res.tempFilePaths.map((path) => path.split('/').pop())
      uni.showToast({
        title: `已选择${res.tempFilePaths.length}个文件`,
        icon: 'success'
      })
    }
  })
}

const validateForm = () => {
  if (!state.form.name) {
    uni.showToast({ title: '请输入姓名', icon: 'none' })
    return false
  }
  if (!state.form.gender) {
    uni.showToast({ title: '请选择性别', icon: 'none' })
    return false
  }
  if (!state.form.age || state.form.age < 16 || state.form.age > 80) {
    uni.showToast({ title: '年龄必须在16-80岁之间', icon: 'none' })
    return false
  }
  if (!state.form.phone || !/^1[3-9]\d{9}$/.test(state.form.phone)) {
    uni.showToast({ title: '请输入正确的手机号码', icon: 'none' })
    return false
  }
  if (!state.form.idCard || !/^\d{17}[\dXx]$/.test(state.form.idCard)) {
    uni.showToast({ title: '请输入正确的身份证号码', icon: 'none' })
    return false
  }
  return true
}

const handleSubmit = () => {
  if (!validateForm()) {
    return
  }

  uni.showModal({
    title: '确认提交',
    content: `您正在申请成为${state.selectedType === 'volunteer' ? '志愿者' : '讲师'}，确认提交申请吗？`,
    success: (res) => {
      if (res.confirm) {
        uni.showLoading({ title: '提交中...' })
        setTimeout(() => {
          uni.hideLoading()
          uni.showModal({
            title: '申请提交成功',
            content: `申请类型：${state.selectedType === 'volunteer' ? '志愿者' : '讲师'}\n选择技能：${state.form.skills.join('、')}\n\n我们将在3-5个工作日内完成审核，请耐心等待。审核结果将通过短信通知您。`,
            showCancel: false,
            success: () => {
              sheep.$router.back()
            }
          })
        }, 1500)
      }
    }
  })
}
</script>

<style lang="scss" scoped>
.header-section {
  background: linear-gradient(135deg, #ffd54f 0%, #ffecb3 100%);
  padding: 60rpx 40rpx;
  text-align: center;
  position: relative;
  overflow: hidden;

  &::before {
    content: '';
    position: absolute;
    width: 400rpx;
    height: 400rpx;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.2) 0%, transparent 70%);
    top: -200rpx;
    right: -100rpx;
    border-radius: 50%;
  }

  .header-icon {
    width: 160rpx;
    height: 160rpx;
    background: linear-gradient(135deg, #ff6b00, #ffa726);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 72rpx;
    margin: 0 auto 40rpx;
    box-shadow: 0 16rpx 40rpx rgba(255, 107, 0, 0.3);
  }

  .header-title {
    font-size: 48rpx;
    font-weight: bold;
    color: #ff6b00;
    margin-bottom: 20rpx;
  }

  .header-subtitle {
    font-size: 28rpx;
    color: #666;
    line-height: 1.5;
  }
}

.type-selection,
.form-section,
.notice-section {
  background: white;
  margin: 30rpx;
  border-radius: 32rpx;
  padding: 40rpx;
  box-shadow: 0 4rpx 24rpx rgba(0, 0, 0, 0.08);

  .section-title {
    display: flex;
    align-items: center;
    gap: 12rpx;
    margin-bottom: 30rpx;

    .title-icon {
      font-size: 36rpx;
    }

    .title-text {
      font-size: 32rpx;
      font-weight: bold;
      color: #333;
    }
  }
}

.type-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24rpx;

  .type-card {
    background: #f8f9fa;
    border-radius: 24rpx;
    padding: 40rpx;
    text-align: center;
    border: 4rpx solid transparent;
    transition: all 0.3s;

    &.active {
      background: linear-gradient(135deg, #fff3e0, #ffecb3);
      border-color: #ff6b00;
      transform: translateY(-4rpx);
    }

    .type-icon {
      width: 100rpx;
      height: 100rpx;
      background: linear-gradient(135deg, #ff6b00, #ffa726);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 48rpx;
      margin: 0 auto 20rpx;
    }

    .type-name {
      font-size: 28rpx;
      font-weight: bold;
      color: #333;
      margin-bottom: 12rpx;
      display: block;
    }

    .type-desc {
      font-size: 24rpx;
      color: #666;
      line-height: 1.4;
    }
  }
}

.form-group {
  margin-bottom: 32rpx;

  .form-label {
    font-size: 28rpx;
    font-weight: bold;
    color: #333;
    margin-bottom: 16rpx;
    display: block;
  }

  .form-input,
  .form-textarea {
    width: 100%;
    padding: 24rpx 30rpx;
    border: 4rpx solid #f0f2f5;
    border-radius: 16rpx;
    font-size: 28rpx;
    background: #f8f9fa;
    transition: all 0.3s;

    &:focus {
      border-color: #ff6b00;
      background: white;
    }
  }

  .picker-input {
    display: flex;
    align-items: center;
    color: #333;
  }

  .form-textarea {
    min-height: 160rpx;
    resize: vertical;
  }
}

.form-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24rpx;
}

.skill-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 16rpx;
  margin-top: 16rpx;

  .skill-tag {
    padding: 12rpx 24rpx;
    background: #f0f2f5;
    border-radius: 30rpx;
    font-size: 24rpx;
    color: #666;
    transition: all 0.3s;

    &.active {
      background: linear-gradient(135deg, #ff6b00, #ffa726);
      color: white;
    }
  }
}

.upload-area {
  border: 4rpx dashed #ddd;
  border-radius: 16rpx;
  padding: 60rpx;
  text-align: center;
  transition: all 0.3s;

  &:active {
    border-color: #ff6b00;
    background: #fff3e0;
  }

  .upload-icon {
    font-size: 72rpx;
    color: #999;
    margin-bottom: 20rpx;
    display: block;
  }

  .upload-text {
    font-size: 28rpx;
    color: #666;
  }

  .file-list {
    margin-top: 20rpx;
    text-align: left;

    .file-item {
      padding: 12rpx;
      background: #f0f2f5;
      border-radius: 8rpx;
      margin-bottom: 8rpx;
      font-size: 24rpx;
      color: #666;
    }
  }
}

.notice-list {
  .notice-item {
    position: relative;
    padding-left: 32rpx;
    margin-bottom: 20rpx;
    font-size: 26rpx;
    line-height: 1.5;
    color: #666;

    &::before {
      content: '•';
      position: absolute;
      left: 0;
      color: #ff6b00;
      font-weight: bold;
      font-size: 32rpx;
    }
  }
}

.submit-section {
  padding: 40rpx 30rpx;

  .submit-btn {
    width: 100%;
    background: linear-gradient(135deg, #ff6b00, #ffa726);
    color: white;
    border: none;
    padding: 30rpx;
    border-radius: 50rpx;
    font-size: 32rpx;
    font-weight: bold;
  }
}
</style>
